<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试Transition属性</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            position: relative;
            top: 0;
            left: 0;
            background-color: brown;
            transition: all 0.5s linear;
        }

        .box:hover {
            background-color: lightpink;
        }

        .btn {
            width: 100px;
        }
    </style>
</head>

<body>
    <button class="btn">点击</button>
    <div class="box"></div>
    <script>
        /*
        #### transition属性

        **作用**

        > ​	从一种状态过渡到另一种状态，用于在一定的时间内进行元素平滑的过渡，这种效果可以在元素被单击，鼠标滑过，或者是其他的事件中触发，实现圆滑的以动画效果改变CSS属性的属性值。



        transition属性是个复合属性，她包括以下几个子属性：

        - transition-property ：规定设置过渡效果的css属性名称，常用值 “all”全部css属性进行动画效果添加
        - transition-duration ：规定完成过渡效果需要多少秒或毫秒    
        - transition-timing-function ：指定过渡函数，规定速度效果的速度曲线 常用值：关键字描述：linear ease-in ease-in-out
        - transition-delay ：指定开始出现的延迟时间  

        */
        var box = document.querySelector(".box");
        var btn = document.querySelector(".btn");
        btn.addEventListener("click", function () {
            box.style.left = '200px';
            setTimeout(() => {
                box.style.top = '200px';
            }, 2000);
        })

    </script>
</body>

</html>